<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">

<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>

    <div id="box">
      <weixinauthor></weixinauthor>

      <weixinuser></weixinuser>
    </div>
   
    <script type="text/javascript">

      var bus = new Vue();//空vue实例 就是中央事件总线

      Vue.component("weixinauthor",{
        template:`<div style="background:blue">
          我是一个微信公众号作者
          <input type="text" ref="mytext"/> 
          <button @click="handleClick()">发布</button>
        </div>`,
        methods:{
          handleClick(){
            bus.$emit("weixinmessage",this.$refs.mytext.value)
          }
        }
      })

      Vue.component("weixinuser",{
        // 合适的位置先 订阅好 bus.$on
        template:`<div style="background:yellow">
          我是一个微信用户
        </div>`,
        mounted(){
          bus.$on("weixinmessage",(data)=>{
            console.log("收到推送了",data)
          })
          console.log("生命周期函数-当前组件的dom 创建完成之后 就会调用")
        }
      })



      new Vue({
        el:"#box"
      })
   
    </script>
</body>
</html>